<script setup lang="ts">
import {ref, defineExpose} from 'vue'

const visible = ref(false)
const formData = ref({
    title: '',
    secret: '',
    period: 30,
})
const show = () => {
    formData.value.title = ''
    formData.value.secret = ''
    formData.value.period = 30
    visible.value = true
}
const emit = defineEmits([
    'submit',
])
const doSubmit = async () => {
    emit('submit', formData.value)
    visible.value = false
}
defineExpose({
    show,
})
</script>

<template>
    <a-modal v-model:visible="visible"
             title-align="start">
        <template #title>
            添加
        </template>
        <template #footer>
            <a-button type="primary" size="small" @click="doSubmit">
                保存
            </a-button>
            <a-button size="small" @click="visible=false">
                关闭
            </a-button>
        </template>
        <div>
            <a-form :model="formData">
                <a-form-item label="名称">
                    <a-input v-model:model-value="formData.title"/>
                </a-form-item>
                <a-form-item label="密钥">
                    <a-input v-model:model-value="formData.secret"/>
                </a-form-item>
                <a-form-item label="超时时间">
                    <a-input-number v-model:model-value="formData.period">
                        <template #append>
                            秒
                        </template>
                    </a-input-number>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

<style scoped>

</style>
